
<template>
  <div id="app">
    <transition name="slide-fade">
      <router-view />
    </transition>
  </div>
</template>
<script>
export default {};
</script>
<style lang="less">
@import url("http://at.alicdn.com/t/font_1426139_h6vn3jbl5q.css");

* {
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
}

a:hover {
  text-decoration: none;
}

ul,
li,
ol {
  list-style: none;
}

#app {
  .slide-fade {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    background-color: white;
  }
  .slide-fade-enter,
  .slide-fade-leave-to {
    left: 0;
    top: 0;
    right: 0;
    position: absolute;
    transform: translateZ(1000px) rotate(0deg) scale(0);
    opacity: 1;
  }
  .slide-fade-enter-active {
    // background-color: white;
    transition: all 0.8s ease;
  }
  .slide-fade-leave-active {
    transition: all 0.5s ease;
    // background-color: white;
    // transform: translateY(1000px) rotate(0deg) scale(0);
    opacity: 0;
    z-index: 100;
  }
}
</style>
